Skip to content

Comments

feat: add Copy/Apply buttons at bottom of code blocks#521

Merged
kevin-on merged 1 commit intomainfrom
feature/498-code-block-footer-buttons
Jan 25, 2026
Merged

feat: add Copy/Apply buttons at bottom of code blocks#521
kevin-on merged 1 commit intomainfrom
feature/498-code-block-footer-buttons

Conversation

@kevin-on
Copy link
Collaborator

@kevin-on kevin-on commented Jan 25, 2026 •
edited
Loading

Closes #498

Description

  • Added footer section with Copy and Apply buttons below code block content
  • Allows users to execute actions without scrolling back to the top
  • Reuses existing header button styles for consistency

Checklist before requesting a review

  • I have reviewed the guidelines for contributing to this repository.
  • I have performed a self-review of my code
  • I have performed a code linting check and type check (by running npm run lint:check and npm run type:check)
  • I have run the test suite (by running npm run test)
  • I have tested the functionality manually

Summary by CodeRabbit

Release Notes

  • New Features
    • Code blocks now include a footer section with Copy and Apply action buttons. The Copy button provides confirmation feedback, while the Apply button executes code changes. These footer controls duplicate existing header actions, offering multiple access points for user convenience.

✏️ Tip: You can customize this high-level summary in your review settings.

@kevin-on
feat: add Copy/Apply buttons at bottom of code blocks
13b3a45 
Closes #498

- Added footer section with Copy and Apply buttons below code block content
- Allows users to execute actions without scrolling back to the top
- Reuses existing header button styles for consistency
@coderabbitai
Copy link

coderabbitai bot commented Jan 25, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

This change adds a duplicate set of Copy and Apply action buttons in a new footer section of the MarkdownCodeComponent, along with corresponding CSS styling. Users can now access these actions at the bottom of code blocks without scrolling to the header.

Changes

Cohort / File(s) Summary
Footer UI Controls
src/components/chat-view/MarkdownCodeComponent.tsx		 Added footer section with Copy button (triggers handleCopy, displays "Copied" state) and Apply button (triggers onApply with aria-disabled state). Mirrors existing header button functionality.
Footer Styling
styles.css		 New .smtcmp-code-block-footer class with flex layout, top border, background color, rounded bottom corners, and fixed height for positioning footer controls.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • PR #377: Modifies the same component's header button classes and behavior, potentially affecting button styling consistency between header and footer implementations.
  • PR #342: Changes MarkdownCodeComponent with preview and file-open features, overlapping scope on the same UI component.
  • PR #344: Updates MarkdownCodeComponent and styles.css for code-block UI controls, sharing identical files and related styling modifications.

Poem

🐰 A footer blooms, buttons anew,
No scrolling back—apply and chew!
Twice the convenience, double the cheer,
The buttons descend, your edits stay near.
✨ Long content flows smooth, rabbit approved! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: add Copy/Apply buttons at bottom of code blocks' clearly and concisely summarizes the main change in the pull request.
Linked Issues check ✅ Passed The PR addresses the primary objective from issue #498 by adding Copy/Apply buttons at the bottom of code blocks to reduce scrolling, fulfilling the main requirement.
Out of Scope Changes check ✅ Passed All changes are scoped to the primary objective; the footer buttons implementation in MarkdownCodeComponent and corresponding CSS styling directly address issue #498's core requirement.
Description check ✅ Passed The PR description addresses the linked issue, explains the changes clearly, and includes the contribution checklist with all items marked complete.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@kevin-on kevin-on merged commit de0a7c4 into main Jan 25, 2026
2 checks passed
@kevin-on kevin-on deleted the feature/498-code-block-footer-buttons branch January 25, 2026 08:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Feature Request]: (UI) Add the copy apply button below as well

1 participant

@kevin-on